<template>
	<view class="base-page">
		<view class="base-title">经营信息</view>
		<view class="flex item-center">
			<view class="label-box">商家名称：</view>
			<view class="inp-box">
				{{baseData.merchantName}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">商家简称：</view>
			<view class="inp-box">
				{{baseData.merchantShortName}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">公司类型：</view>
			<view class="inp-box">
				
				{{getText(baseData.companyType,	dirctionList.companyType)}}
			</view>
		</view>
		<view class="flex">
			<view class="label-box">商家logo：</view>
			<view style="margin: 10px 0 10px 10px; width: 80px;">
				<image :src="baseData.logo" mode="widthFix" style="width: 80px;height:80px;"></image>
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">所属行业：</view>
			<view class="inp-box">
				{{baseData.mccName}}
				<!-- {{baseData.mccLevel1Name}}{{baseData.mccLevel1Name?'、':""}}{{baseData.mccLevel2Name}}{{baseData.mccLevel2Name?'、':""}}{{baseData.mccName}} -->
			</view>
			
		</view>
		<view class="flex">
			<view class="label-box">营业执照图片：</view>
			<view style="margin: 10px 0 10px 10px; width: 80px;">
				<image :src="baseData.licensePicUrl" mode="widthFix" style="width: 80px;"></image>
			</view>
			<!-- <image :src="baseData.licensePicUrl" mode=""></image> -->
		</view>
		<view class="flex item-center">
			<view class="label-box">营业执照编号：</view>
			<view class="inp-box">
				{{baseData.licenseCode}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">营业执照有效期：</view>
			<view class="inp-box">
				{{getText(baseData.licenseValidityType,	dirctionList.certValidityType)}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">营业执照有效期开始日期：</view>
			<view class="inp-box">
				{{baseData.licenseBeginDate}}
			</view>
		</view>
		<view class="flex item-center" v-if="baseData.licenseValidityType == 0">
			<view class="label-box">营业执照有效期截止日期：</view>
			<view class="inp-box">
				{{baseData.licenseEndDate}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">成立时间：</view>
			<view class="inp-box">
				{{baseData.foundDate}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">注册资本：</view>
			<view class="inp-box">
				{{baseData.regCapital}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">经营范围：</view>
			<view class="inp-box">
				{{baseData.businessScope}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">注册地址：</view>
			<view class="inp-box">
				{{baseData.regProvinceName ?
				baseData.regProvinceName + (baseData.regCityName?'/'+baseData.regCityName:'')+(baseData.regCountyName?'/'+baseData.regCountyName:'')
				: '请选择注册地址'}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">注册详细地址：</view>
			<view class="inp-box">
				{{baseData.regAddress}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">经营地址：</view>
			<view class="inp-box">
				{{baseData.businessProvinceName ? 
					baseData.businessProvinceName + (baseData.businessCityName?'/'+baseData.businessCityName:'')+(baseData.businessCountyName?'/'+baseData.businessCountyName:''):''}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">经营详细地址：</view>
			<view class="inp-box">
				{{baseData.businessAddress}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">客服电话：</view>
			<view class="inp-box">
				{{baseData.customerMobile}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">联系人姓名：</view>
			<view class="inp-box">
				{{baseData.contactName}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">联系人手机号：</view>
			<view class="inp-box">
				{{baseData.contactMobileNo}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">联系人身份证号：</view>
			<view class="inp-box">
				{{baseData.contactCertNo}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">联系人邮箱：</view>
			<view class="inp-box">
				{{baseData.contactEmail}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">系统管理员：</view>
			<view class="inp-box">
				{{baseData.mobile}}
			</view>
		</view>
		<view class="flex">
			<view class="label-box">线下经营-收银台：</view>
			<view style="margin: 10px 0 10px 10px; width: 80px;">
				<image :src="baseData.storeCashierDeskPicUrl" mode="widthFix" style="width: 80px;"></image>
			</view>
		</view>
		<view class="flex">
			<view class="label-box">线下经营-门头照：</view>
			<view style="margin: 10px 0 10px 10px; width: 80px;">
				<image :src="baseData.storeHeaderPicUrl" mode="widthFix" style="width: 80px;"></image>
			</view>
		</view>
		<view class="flex">
			<view class="label-box">线下经营-内景照：</view>
			<view style="margin: 10px 0 10px 10px; width: 80px;">
				<image :src="baseData.storeIndoorPicUrl" mode="widthFix" style="width: 80px;"></image>
			</view>
		</view>
		<!-- 法人信息 -->
		<view class="base-title">法人信息</view>
		<view class="flex item-center">
			<view class="label-box">法人姓名：</view>
			<view class="inp-box">
				{{settleData.legalName}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">法人证件类型：</view>
			<view class="inp-box">
				{{getText(settleData.legalCertType,dirctionList.certType)}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">法人证件号：</view>
			<view class="inp-box">
				{{settleData.legalCertNo}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">法人证件有效期：</view>
			<view class="inp-box">
				{{getText(settleData.legalCertValidityType, dirctionList.certValidityType)}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">法人证件有效期开始日期：</view>
			<view class="inp-box">
				{{settleData.legalCertBeginDate}}
			</view>
		</view>
		<view class="flex item-center" v-if="settleData.legalCertValidityType == 0">
			<view class="label-box">法人证件有效期截止日期：</view>
			<view class="inp-box">
				{{settleData.legalCertEndDate}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">法人身份证地址：</view>
			<view class="inp-box">
				{{settleData.legalAddr}}
			</view>
		</view>
		<view class="flex">
			<view class="label-box">法人身份证人像面：</view>
			<view style="margin: 10px 0 10px 10px; width: 140px;">
				<image :src="settleData.legalCertFrontPicUrl" mode="widthFix" style="width: 140px;"></image>
			</view>
			
		</view>
		<view class="flex">
			<view class="label-box">法人身份证国徽面：</view>
			<view style="margin: 10px 0 10px 10px; width: 140px;">
				<image :src="settleData.legalCertBackPicUrl" mode="widthFix" style="width: 140px;"></image>
			</view>
		</view>
		<!-- <view class="flex item-center">
			<view class="label-box">签约人：</view>
			<view class="inp-box">
				{{settleData.signUserType==2?'联系人':'法人'}}
			</view>
		</view>
		<view class="" v-if="settleData.signUserType == 2">
			<view class="flex item-center">
				<view class="label-box">联系人姓名：</view>
				<view class="inp-box">
					{{baseData.contactName}}
				</view>
			</view>
			<view class="flex item-center">
				<view class="label-box">联系人手机号：</view>
				<view class="inp-box">
					{{baseData.contactMobileNo}}
				</view>
			</view>
		</view>
		
		<view class="flex item-center">
			<view class="label-box">联系人身份证号：</view>
			<view class="inp-box">
				{{settleData.contactCertNo}}
			</view>
		</view> -->
		<view class="flex item-center">
			<view class="label-box">法人手机号：</view>
			<view class="inp-box">
				{{settleData.legalMobileNo}}
			</view>
		</view>
		<view class="base-title m-t">结算信息</view>
		<view class="flex item-center">
			<view class="label-box">账户类型：</view>
			<view class="inp-box">
				{{getText(settleData.cardType,dirctionList.cardType)}}
			</view>
		</view>
		<view v-if="settleData.cardType == 0" class="flex">
			<view class="label-box">开户许可证：</view>
			<view style="margin: 10px 0 10px 10px; width: 140px;">
				<image :src="settleData.regAcctPicUrl" mode="widthFix" style="width: 140px;"></image>
			</view>
		</view>
		<view class="flex item-center" v-if="settleData.cardType == 0">
			<view class="label-box">开户许可证核准号：</view>
			<view class="inp-box">
				{{settleData.openLicenceNo}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">账户名称：</view>
			<view class="inp-box">
				{{settleData.cardName}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">银行账号：</view>
			<view class="inp-box">
				{{settleData.cardNo}}
			</view>
		</view>
		<!-- <view>
			<view class="label-box">开户银行：</view>
			<view class="inp-box">
				{{settleData.businessName}}
			</view>
		</view> -->
		<view class="flex item-center">
			<view class="label-box">所属银行：</view>
			<view class="inp-box">
				{{getText(settleData.bankCode,dirctionList.listBank)}}
			</view>
		</view>
		<view class="flex item-center">
			<view class="label-box">银行卡所在地：</view>
			<view class="inp-box">
				{{settleData.bankProvinceName ? 
					settleData.bankProvinceName + (settleData.bankCityName?'/'+settleData.bankCityName:'')+(settleData.bankCountyName?'/'+settleData.bankCountyName:'')
					: '请选择银行卡所在地'}}
			</view>
		</view>
		
		<view  class="flex item-center" v-if="settleData.cardType == 0">
			<view class="label-box">支行联行号：</view>
			<view class="inp-box">
				{{settleData.branchCode}}
			</view>
		</view>
		<view  v-if="settleData.cardType != 0">
			<view class="flex item-center">
				<view class="label-box">持卡人证件类型：</view>
				<view class="inp-box">
					{{getText(settleData.certType,dirctionList.certType)}}
				</view>
			</view>
			<view class="flex item-center">
				<view class="label-box">持卡人证件号码：</view>
				<view class="inp-box">
					{{settleData.certNo}}
				</view>
			</view>
			<view class="flex item-center">
				<view class="label-box">持卡人证件有效期：</view>
				<view class="inp-box">
					{{getText(settleData.certValidityType,dirctionList.certValidityType)}}
				</view>
			</view>
			<view class="flex item-center">
				<view class="label-box">持卡人证件有效期开始日期：</view>
				<view class="inp-box">
					{{settleData.certBeginDate}}
				</view>
			</view>
			<view class="flex item-center" v-if="settleData.certValidityType == 0">
				<view class="label-box">持卡人证件有效期截止日期：</view>
				<view class="inp-box">
					{{settleData.certEndDate}}
				</view>
			</view>
			<view class="flex">
				<view class="label-box">银行卡正面：</view>
				<view style="margin: 10px 0 10px 10px; width: 140px;">
					<image :src="settleData.settleCardFrontPicUrl" mode="widthFix" style="width: 140px;"></image>
				</view>
				
			</view>
			<view class="flex">
				<view class="label-box">持卡人身份证人像面：</view>
				<view style="margin: 10px 0 10px 10px; width: 140px;">
					<image :src="settleData.settleCertFrontPicUrl" mode="widthFix" style="width: 140px;"></image>
				</view>
			</view>
			<view class="flex">
				<view class="label-box">持卡人身份证国徽面：</view>
				<view style="margin: 10px 0 10px 10px; width: 140px;">
					<image :src="settleData.settleCertBackPicUrl" mode="widthFix" style="width: 140px;"></image>
				</view>
			</view>
			<view class="flex item-center">
				<view class="label-box">银行卡绑定手机号：</view>
				<view class="inp-box">
					{{settleData.mp}}
				</view>
			</view>
		</view>
		<view class="k-page"></view>
		<view class="btn-box flex item-center justify-between">
			<view class="callback-btn" @click="preStep">返回修改</view>
			<view class="release-btn" @click="submit">确认并提交</view>
		</view>
	</view>
</template>

<script setup>
	import {onMounted,ref} from 'vue'
	import {applyBusiness} from '@/api/businessEnterApply.js'
	import {
		listCertValidityType,
		listCompanyType,
		listCertType,
		listCardType,
		listBank
	} from '@/api/common.js'
	import {getListType} from '../../api/common.js'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	const props = defineProps({
		settleData: {
			type: Object 
		},
		baseData: {
			type: Object 
		},
		code: {
			type: String 
		},
	})
	const emit = defineEmits(['preStep','nextStep'])
	const preStep = () => {
		emit('preStep',1)
	}
	let dirctionList = ref({
		certValidityType: [],
		companyType: [],
		certType:[],
		cardType:[],
		listBank:[]
	})
	const getCommonData = () => {
		// listCertType(), listCardType(),
		Promise.all([listCertValidityType(),listCompanyType(),listCertType(),listCardType(),listBank()])
			.then(async (result) => {
				if (result.length) {
					dirctionList.value = {
						certValidityType: result[0],
						companyType: result[1],
						certType:result[2],
						cardType:result[3],
						listBank: result[4]
					}
					
				}
				// console.log(result, 'a')
			})
	}
	const submit = async () =>{
		let data = Object.assign({},props.settleData,props.baseData)
		if(props.code){
			data.settleCode = props.code
		}
		data.openid = uni.getStorageSync('openId')
		data.settlementType = 2
		// console.log(data,'ddd')
		
		// return
		// data.settleCode =  'A6RC26'
		uni.showLoading()
		applyBusiness(data).then(result => {
			uni.hideLoading()
			emit('nextStep',{step:4})
			
		}).catch(err => {
			uni.hideLoading()
			uni.showToast({
				icon: 'none',
				title: err.message
			})
			// console.log(err,'fffff')
			if(err.code == 10012){
				emit('nextStep',{step:5})
			}
		})
	}
	const getText = (code,list) => {
		return getListType(code,list)
	}
	onMounted(() => {
		getCommonData()
	})
</script>

<style lang="scss" scoped>
	.base-page {
		padding: 20px;
		background-color: #ffffff;
	}

	.base-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		margin-bottom: 10px;
	}

	.label-box {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
		margin: 6px 0;
	}

	.inp-box {
		// background: rgba(245, 245, 245, 1);
		// height: 20px;
		// border-radius: 12px;
		padding: 0 10px;
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		max-width: calc(100% - 80px);
	}

	.tip-title {
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		color: rgba(51, 51, 51, 0.6);
		margin-top: 4px;
	}

	.select-box {
		background: rgba(245, 245, 245, 1);
	}

	.upload-box {
		width: 100%;
		height: 100%;
		border: 1px dashed rgba(51, 51, 51, 0.6);
		background-color: rgba(245, 245, 245, 1);
		border-radius: 12px;
		font-size: 12px;
		color: rgba(51, 51, 51, 0.6);
	}

	.icon-date {
		width: 16px;
	}

	.m-t-b {
		margin: 10px 0;

		.label-box {
			width: 70px;
		}

		.inp-box {
			margin-left: 10px;
			width: calc(100% - 80px);
		}
	}

	.m-t-b-10 {
		margin: 10px 0;
	}

	.release-btn {
		// width: 343px;
		width: 40%;
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		// gap: 10px;
		background: #FA4543;
		color: #ffffff;
		margin: 10px 20px;
		text-align: center;
		line-height: 46px;
	
		&.unactive {
			background: rgba(169, 171, 172, 1);
		}
	}
	.callback-btn{
		width: 40%;
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		background: #ffffff;
		color: rgba(51, 51, 51, 0.6);
		border: 1px solid rgba(51, 51, 51, 0.6);
		margin: 10px 20px;
		text-align: center;
		line-height: 46px;
	}

	.k-page {
		height: 120px;
	}

	.btn-box {
		position: fixed;
		bottom: 0px;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 7;
		padding: 10px 0;
	}
	.text-hide{
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	.m-t{
		margin-top: 10px;
	}
</style>